<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Button, Card, Input, message } from 'ant-design-vue';

import { aiGenerateImage } from '#/api/ai/ai';
import { Icon } from '#/components/icon';

/* 导入共享组件 */
import { Empty, Loading } from '../components';
/* 导入共享的主题组合式函数 */

/* 状态管理 */
const prompt = ref('');
const loading = ref(false);
const imageUrl = ref(''); /* 使用单个图片URL，因为后端只支持生成一张图片 */

/* 初始化 */
onMounted(() => {
  /* 主题已经在useTheme中自动处理了，不需要额外初始化 */
});

/* 生成图片 */
const handleGenerate = async () => {
  if (!prompt.value.trim()) {
    message.warning('请输入提示词');
    return;
  }

  loading.value = true;
  imageUrl.value = ''; /* 清空当前图片 */

  try {
    /* 调用文生图API */
    const url = await aiGenerateImage(prompt.value);
    imageUrl.value = url;
    message.success('图片生成完成');
  } catch (error) {
    message.error('图片生成失败，请稍后重试');
    console.error('生成图片失败:', error);
  } finally {
    loading.value = false;
  }
};

/* 重置 */
const handleReset = () => {
  prompt.value = '';
  imageUrl.value = '';
};
</script>

<template>
  <Page auto-content-height>
    <Card title="AI文生图" :bordered="false" class="ai-card">
      <div class="responsive-container">
        <!-- 左侧输入区域 -->
        <div class="left-section">
          <div class="form-item">
            <div class="form-label">提示词</div>
            <Input.TextArea
              v-model:value="prompt"
              placeholder="请输入详细的图像描述..."
              :rows="6"
              :maxlength="500"
              :show-count="true"
            />
          </div>

          <div class="form-actions">
            <Button
              type="primary"
              :loading="loading"
              @click="handleGenerate"
              class="animated-button"
              style="margin-right: 8px"
            >
              <Icon icon="ant-design:picture-outlined" />
              生成图像
            </Button>
            <Button @click="handleReset" class="animated-button">
              <Icon icon="ant-design:clear-outlined" />
              重置
            </Button>
          </div>
        </div>

        <!-- 右侧图片展示区域 -->
        <div class="right-section image-display-area">
          <Loading
            v-if="loading"
            text="正在生成精美图像..."
            sub-text="AI 正在绘制您的创意"
          />

          <div v-else-if="imageUrl" class="image-result">
            <img :src="imageUrl" alt="生成图像" class="result-image" />
            <div class="image-actions">
              <Button type="link" title="下载图片" class="animated-button">
                <Icon icon="ant-design:download-outlined" />
              </Button>
              <Button type="link" title="查看原图" class="animated-button">
                <Icon icon="ant-design:eye-outlined" />
              </Button>
            </div>
          </div>

          <Empty
            v-else
            icon="ant-design:bulb-outlined"
            text="填写提示词，由AI为您创作精美图像"
            tips="支持中英文提示词，越详细的描述会产生越好的效果"
          />
        </div>
      </div>
    </Card>
  </Page>
</template>

<style lang="less" scoped>
// 引入通用样式和主题变量
@import '../styles/common.less';
@import '../styles/theme.less';

// 图像生成页面特定样式
.image-display-area {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px; // 固定高度
}

.image-result {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  transition: transform 0.3s;

  &:hover {
    box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
    transform: translateY(-4px);

    .image-actions {
      opacity: 1;
    }
  }

  .result-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
  }

  .image-actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    padding: 8px;
    background: linear-gradient(transparent, rgb(0 0 0 / 60%));
    opacity: 0;
    transition: opacity 0.3s;

    button {
      margin: 0 8px;
      color: white;
    }
  }
}
</style>
